<template>
  <div class="wrap">
    <div class="tishi">
      <span style="font-size: 16px; font-weight: bold">banner图</span>
      大小:345×140px 图片大小建议不超过1M；请最少上传一张预览图，最多可上传3张
    </div>
    <el-upload
      :disabled="user == 1 || user == 'y'"
      :class="uploadDisabled"
      :action="httpurl + '/api/fileUpload'"
      list-type="picture-card"
      :limit="3"
      accept=".jpg, .jpeg, .png, .JPG, .JPEG, .PNG"
      :before-upload="beforeUpload"
      :on-error="handleFail"
      :on-success="handleSuccess"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
      :on-change="handleChange"
      :file-list="listImg"
    >
      <el-dialog :visible.sync="dialogVisible" append-to-body>
        <img width="100%" :src="dialogImageUrl" alt />
      </el-dialog>
      <span class="title">上传banner</span>
    </el-upload>
    <!-- <button @click="getData">获取连接</button> -->
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      uploadDisabled: "",
      httpurl: this.GLOBAL.httpurl,
      // fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {url: "http://qiniuimg.bssale.com/Fsuo3Oh459TMavCQD506t2i0sxaX", id: "2026", status: "0"}],
      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false,
      listImg: [],
      //提交的图片的数据
      bgPhotos: [],
      //同上
      subListImg: [],
      uid: null,
      imgUrl: [],
      imgUrl2: [],
      temp: [],
      imgData: [],
      zanimg: [],
      user: null,
    };
  },
  created() {
    this.user = this.$route.query.user;
    if(this.user=="1" || this.user== 'y'){
      this.uploadDisabled = "disabled";
    }
  },
  mounted() {
    let uid = this.$route.query.uid;
    this.uid = uid;
    console.log("下面是会先的图片");
    let userId = this.$route.query.uid;
    console.log(userId);
    if (userId) {
      // alert(456)
      axios
        .post("/api/active/queryUpdateActive", { activeUid: userId })
        .then((res) => {
          console.log(res);
          let newArr = [];
          let imgUrl = res.data.data.coverPhotos;
          console.log("下面啊下面下面那地方爱的色放");
          console.log(imgUrl);
          // var cc = new Object()
          // cc.response={data:{}}
          // cc.response.data=
          for (let i = 0; i < imgUrl.length; i++) {
            // alert(imgUrl[k].filePath)
            this.imgUrl.push(imgUrl[i].filePath);
            if(this.imgUrl.length>2){
              this.uploadDisabled = "disabled";
            }
            // alert("这是" + JSON.stringify(imgUrl[k].filePath))
            // imgUrl[0].response.data.filePath
            // response:{data:{filePath:{imgUrl[k].filePath}}}
            console.log("img多层嵌套");
            console.log(this.temp);
          }
          // this.imgUrl = imgUrl;
          // alert(JSON.stringify(this.imgUrl))
          this.imgUrl2 = imgUrl;
          for (let i = 0; i < imgUrl.length; i++) {
            newArr.push({ url: imgUrl[i].filePath, id: imgUrl[i].id });
          }
          console.log("下面是");
          console.log(newArr);
          this.listImg = newArr;
          // alert(JSON.stringify(this.listImg))
        })
        .catch((err) => {
          console.log(err);
        });
    }
  },
  methods: {
    handleFail() {
      layer.open({
        content: "图片上传失败，请重新上传",
        skin: "msg",
        time: 1, //1秒后自动关闭
      });
    },
    handleSuccess(res, file, fileList) {
      console.log("上传成功");
      // console.log(res);
      // var cc = []
      // // console.log(this.imgData)
      // // let imgUrl = res.data.filePath
      // cc.push(res.data.filePath)
      // console.log("cc下面")
      // console.log(cc)
      this.imgUrl.push(res.data.filePath);
      if(this.imgUrl.length>2){
        this.uploadDisabled = "disabled";
      }
      console.log(res.data);
      console.log("村技巧怒");
      console.log(this.imgUrl);
      // console.log("下面是上柴按的发")
      // console.log(imgUrl)
      // this.imgUrl.push(imgUrl)
      // console.log("存到数组里面")
      // console.log(this.imgUrl)
      // alert( "看看" + JSON.stringify(imgUrl))
      // let imgUrl = res.data.filePath;

      // this.imgUrl.push(imgUrl);
      // console.log("下面啊是上传成功的图片信息")
      // console.log(this.imgUrl);
    },
    beforeUpload(file) {
      let newName = file.name.substring(file.name.lastIndexOf("."));
      let islt1M = file.size / 1024 / 1024 < 1000;
      const isJPG =
        file.type === "image/jpeg" ||
        file.type === "image/png" ||
        file.type === "image/jpg";
      if (!isJPG) {
        layer.open({
          content: "上传预览图片只能是 jpg、jpeg、png 格式!",
          skin: "msg",
          time: 2,
        });
        return false;
      }
      if (!islt1M) {
        layer.open({
          content: "图片尺寸限制为345：140",
          skin: "msg",
          time: 2,
        });
        // this.$notify({
        //   title: "错误",
        //   message: "图片尺寸限制为345：140，大小不可超过1M",
        //   type: "error",
        // });
        return false;
      } else {
        const isSize = new Promise((resolve, reject) => {
          // const width = 345;
          // const height = 140;
          const _URL = window.URL || window.webkitURL;
          const img = new Image();
          img.onload = () => {
            let name =
              file.name.substring(0, file.name.lastIndexOf(".")) +
              "_" +
              img.width +
              "_" +
              img.height +
              newName;
            file = new File([file], name);
            const valid = this.$commit.ImageRestrictions(
              img.width,
              img.height,
              1
            );
            valid ? resolve() : reject();
          };
          img.src = _URL.createObjectURL(file);
        }).then(
          () => {
            return file;
          },
          () => {
            layer.open({
              content: "图片尺寸限制为345：140",
              skin: "msg",
              time: 2,
            });
            // this.$notify({
            //   title: "错误",
            //   message: "图片尺寸限制为345：140，大小不可超过1M",
            //   type: "error",
            // });
            return Promise.reject();
          }
        );
        return isSize;
      }
    },
    handleRemove(file, fileList) {
      console.log("下面是删除以后的");
      console.log(fileList);
      this.uploadDisabled=""
      let tu = [];
      for (let i = 0; i < fileList.length; i++) {
        // let tu=[];
        tu.push(fileList[i].url);
      }

      this.imgUrl = tu;
      console.log("删除后的图片");
      console.log(this.imgUrl);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
      console.log(this.dialogImageUrl);
    },
    getData() {
      // console.log(this.imgUrl)
      // alert("被调用")
      let uid = this.$route.query.uid;
      console.log(this.imgUrl);
      // var newArrImgUrl = [];
      // const length = this.imgUrl.length;
      for (let i = 0; i < this.imgUrl.length; i++) {
        this.imgData.push({ filePath: this.imgUrl[i] });
      }
      this.$store.commit("setBannerData", this.imgData);
      console.log("查看banner的图片");
      console.log(this.$store.state.bannerData);
      // }

      // this.$store.commit("setBannerData",)
    },
  },
};
</script>

<style rel="stylesheet/scss">
  .disabled .el-upload--picture-card{
    display: none;
  }
</style>
<style scoped>
.title {
  color: #409eff;
}
.wrap {
  width: 96%;
  margin: 0 auto;
}
/deep/ .el-upload--picture-card {
  width: 345px;
  height: 140px;
}
/deep/ .el-upload-list__item {
  width: 345px;
  height: 140px;
}
/deep/ .el-upload-list__item {
  margin-right: 40px;
  box-shadow: 0px 2px 22px rgba(0, 0, 0, 0.2);
}
.mainTitle {
  margin-top: 40px;
  margin-bottom: 20px;
  font-size: 16px;
}
.tishi {
  margin-bottom: 20px;
  font-size: 14px;
  margin-top: 40px;
}

.uoloadSty .el-upload--picture-card {
  width: 110px;
  height: 110px;
  line-height: 110px;
}
.disUoloadSty .el-upload--picture-card {
  display: none; /* 上传按钮隐藏 */
}
/deep/ .el-upload--picture-card {
  border: 0;
  box-shadow: 0px 2px 22px rgba(0, 0, 0, 0.2);
}
</style>